/*
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-06-23 14:13:37
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-06-23 14:56:38
 * @FilePath: \project_keep\keep_motion_manger\src\utils\mcaptcha.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { ref, onMounted } from 'vue';

export function useMcaptcha(options) {
  const fontSize = 24;
  const ctx = ref(null);
  const num1 = ref(0);
  const num2 = ref(0);
  const createCodeImg = ref('');
  const canvasRef = ref(null);
  const init = () => {
    if (canvasRef.value) {
      // 使用 HTML5 Canvas API 获取 2D 上下文
      ctx.value = canvasRef.value.getContext('2d');
      ctx.value.textBaseline = "middle";
      ctx.value.fillStyle = randomColor(180, 240);
    }
  };

  const refresh = () => {
    if (!ctx.value) return;
    num1.value = randomNum(0, 9);
    num2.value = randomNum(0, 9);
    createCodeImg.value = `${num1.value}+${num2.value}=?`;

    let arr = [createCodeImg.value];
    if (arr.length === 0) {
      arr = ['e', 'r', 'r', 'o', 'r'];
    }
    let offsetLeft = options.width * 0.6 / (arr.length - 1);
    let marginLeft = options.width * 0.2;

    // 清空画布
    ctx.value.clearRect(0, 0, options.width, options.height);
    ctx.value.fillStyle = randomColor(180, 240);
    ctx.value.fillRect(0, 0, options.width, options.height);

    arr.forEach((item, index) => {
      ctx.value.fillStyle = randomColor(0, 180);
      let size = randomNum(24, fontSize);
      ctx.value.font = `${size}px Arial`;
      let dis = offsetLeft * index + marginLeft - size * 0.3;
      let deg = randomNum(-1, 1);
      ctx.value.save();
      ctx.value.translate(dis, options.height * 0.5);
      ctx.value.rotate(deg * Math.PI / 180);
      ctx.value.fillText(item, options.width * 0.2,  options.height * 0.5);
      ctx.value.restore();
    });

    for (let i = 0; i < 4; i++) {
      ctx.value.strokeStyle = randomColor(40, 180);
      ctx.value.beginPath();
      ctx.value.moveTo(randomNum(0, options.width), randomNum(0, options.height));
      ctx.value.lineTo(randomNum(0, options.width), randomNum(0, options.height));
      ctx.value.stroke();
    }

    for (let i = 0; i < options.width / 4; i++) {
      ctx.value.fillStyle = randomColor(0, 255);
      ctx.value.beginPath();
      ctx.value.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
      ctx.value.fill();
    }
  };

  const validate = (code) => {
    const inputCode = Number(code);
    const vCode = num1.value + num2.value;
    if (inputCode === vCode) {
      return true;
    } else {
      refresh();
      return false;
    }
  };

  const randomNum = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
  };

  const randomColor = (min, max) => {
    let r = randomNum(min, max);
    let g = randomNum(min, max);
    let b = randomNum(min, max);
    return `rgb(${r},${g},${b})`;
  };

  onMounted(() => {
    init();
    refresh();
  });

  return {
    createCodeImg,
    validate,
    refresh,
    canvasRef
  };
}